<!--
 * @Author: Wangtao
 * @Date: 2020-10-22 19:27:39
 * @LastEditors: Wangtao
 * @LastEditTime: 2021-04-17 16:40:19
-->
<template>
  <continer>
    <template slot="content">
      <el-form
        class="m7-form"
        :label-position="labelPosition"
        :rules="rules"
        :model="formData"
        size="mini"
        ref="nodeForm"
      >
        <el-form-item label="节点名称" prop="name">
          <el-input v-model="formData.name" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="放音类型" prop="playType">
          <el-radio-group v-model="formData.playType">
            <el-radio label="voiceLibrary">语音库</el-radio>
            <el-radio label="tts">语音合成TTS</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务厂商" prop="engine" v-if="formData.playType === 'tts'">
          <el-select v-model="formData.engine" placeholder="请选择">
            <el-option
                    v-for="item in engineList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <div class="soundSettings" v-if="formData.playType === 'tts'">
          <el-form-item label="合成文本" prop="text" style="width: 100%">
          <span slot="label">
            <span>合成文本</span>
            <el-dropdown  @command="changeReplaceVar" class="fr" v-model="formData.replaceVar" trigger="click">
              <span class="el-dropdown-link">
                插入变量<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="'${customerNumber}'">主叫号码</el-dropdown-item>
                <el-dropdown-item command="'${trunkNumber}'">被叫号码</el-dropdown-item>
                <el-dropdown-item command="'${agentNumber}'">座席工号</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
            <el-input type="textarea" size="mini" v-model="formData.text" placeholder="请输入文本（支持SSML标签）"></el-input>
          </el-form-item>
          <div class="block">
            <span class="demonstration">语速</span>
            <el-slider v-model="formData.speechRate"></el-slider>
          </div>
          <div class="block">
            <span class="demonstration">音调</span>
            <el-slider v-model="formData.pitchRate"></el-slider>
          </div>
          <div class="block">
            <span class="demonstration">音量</span>
            <el-slider v-model="formData.volume"></el-slider>
          </div>
          <div class="block">
            <el-form-item label="音色" prop="voiceName">
              <m7Select
                      size="mini"
                      v-model="formData.voiceName"
                      :placeholder="'请选择音色'"
                      filterable
                      :multiple="false"
                      :collapse-tags="false"
                      :options="voiceList"
                      :remote="true"
              >
              </m7Select>
            </el-form-item>
          </div>
          <div style="width:100%; margin: -4px 0 16px;">
            <el-button type="primary" @click="compositePreview" size="mini">
              <img v-if="compositeLoading" style="width: 14px;display: inline-block;vertical-align: bottom;margin-right: 4px;" src="../../../../../assets/img/compositeLoading.gif" alt="">
              <span v-else style="font-size:14px;" class="V7_iconfont V7_iconV7tubiao_yuyinhecheng"></span>
              <span>合成预览</span>
            </el-button>
            <audio v-if="formData.previewRecordUrl" style="margin-top:14px;" :src="formData.previewRecordUrl" :autoplay="false" controls></audio>
          </div>
        </div>
        <el-form-item label="语音文件" prop="voice" v-if="formData.playType === 'voiceLibrary'">
          <div style="display: flex">
            <m7Select
              size="mini"
              v-model="formData.voice"
              :placeholder="'请选择语音文件'"
              filterable
              :multiple="false"
              :collapse-tags="false"
              :options="voiceLibraryList"
              :remote="true"
              :defaultProps="{ label: 'name', value: '_id' }"
            >
            </m7Select>
            <AudioProgress
              class="audioProgress"
              ref="audioProgressRef"
              :row="currentVoice"
              :showDowload="false"
              :showListen="true"
              type="common"
              :url="currentVoice.fileUrl"
              v-if="currentVoice.fileUrl"
            ></AudioProgress>
          </div>
        </el-form-item>
        <el-form-item label="重播次数" prop="replayTimes">
          <el-input v-model="formData.replayTimes" type="number" size="mini">
            <template slot="append">次</template>
          </el-input>
        </el-form-item>
        <el-form-item label="重播间隔" prop="replayInterval">
          <el-input v-model="formData.replayInterval" type="number" size="mini">
            <template slot="append">秒</template>
          </el-input>
        </el-form-item>
        <el-form-item
          :label="item.label"
          prop="region"
          v-for="(item, index) in condition"
          :key="index"
        >
          <el-select
            v-model="item.to"
            placeholder="请选择下一步节点"
            style="width: 100%"
            clearable
            filterable
          >
            <el-option
              v-for="(node, index) in nodeList"
              :label="node.data.name"
              :value="node.id"
              :key="index"
              v-show="!node.viewOnly && node.id !== currentData.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </template>
    <template slot="oprate">
      <el-button @click="cancel" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit" size="mini">确定</el-button>
    </template>
    <template slot="remove">
      <el-button @click="deleteNode" type="danger" size="mini">删除</el-button>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Mixins, Vue } from 'vue-property-decorator'
import continer from '@/components/configCommon/ui-modules/drawer-container.vue'
import nodeEidtMixins from './nodeEidtMixins'
import { IvrModule } from '@/store/modules/config/ivr'
import { deepClone } from '@/utils/common'
import remoteSelect from '@/components/configCommon/operate-modules/remoteSearch/index.vue'
@Component({
  name: 'ivr-node-play',
  components: { continer, remoteSelect }
})
export default class extends Mixins(nodeEidtMixins) {
  private compositeLoading: boolean = false
  private engineList: any[] = [
    { label: '阿里云', value: 'ali' }
    // { label: '科大讯飞', value: 'kdxf' },
    // { label: '华为云', value: 'hw' }
  ]

  private voiceList: object[] = [
    { label: '思悦（温柔女声）', value: 'siyue' },
    { label: '小云（标准女声）', value: 'xiaoyun' },
    { label: '小刚（标准男声）', value: 'xiaogang' },
    { label: '若兮（温柔女生）', value: 'ruoxi' },
    { label: '思琪（温柔女生）', value: 'siqi' }
  ]

  private changeReplaceVar (replaceVar: string) {
    Vue.set(this.formData, 'text', `${this.formData.text || ''}${replaceVar}`)
  }

  private compositePreview () {
    if (this.compositeLoading) { // 合成中，再次请求跳出
      return false
    }
    const nodeFormRef: any = this.$refs.nodeForm
    nodeFormRef.validate((valid) => {
      if (valid) {
        const actionData = deepClone(this.formData)
        if (actionData.text) {
          actionData.text = actionData.text.replaceAll('${customerNumber}', '主叫号码').replaceAll('${trunkNumber}', '被叫号码').replaceAll('${agentNumber}', '座席工号') // eslint-disable-line no-template-curly-in-string
        }
        this.compositeLoading = true
        const data = { url: '/call/action/config/ivr/generate', method: 'POST', data: actionData }
        IvrModule.IvrCommonAction(data).then((res: any) => {
          if (res && res.success && res.data) {
            this.formData.previewRecordUrl = res.data.key || ''
          }
          this.compositeLoading = false
        })
      } else {
        return false
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
.el-dropdown-link
  cursor pointer
  color #409EFF
.soundSettings
  display flex
  flex-wrap wrap
  justify-content space-between
  .block
    width 48%
.audioProgress
  margin 0 10px 0
</style>
<style lang='stylus'>
.el-form-item__label
  width 100%
</style>
